<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%-- 页头 --%>
    <title>用户管理 - ReadJava教程</title>
    <%@include file="../common/head.jsp" %>
</head>
<body>
<div class="wrapper">

    <%-- 导航 --%>
    <%@include file="manage-header.jsp" %>

    <%-- 侧边栏 --%>
    <%@include file="manage-sidebar.jsp" %>

    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">用户管理</h4>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">用户管理</div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>用户编号</th>
                                            <th>用户名</th>
                                            <th>登录邮箱</th>
                                            <th>联系电话</th>
                                            <th>用户状态</th>
                                            <th>注册时间</th>
                                            <th>上次登录</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach items="${userList}" var="user">
                                            <tr>
                                                <td>${user.userId}</td>
                                                <td>${user.userName}</td>
                                                <td>${user.userEmail}</td>
                                                <td>${user.userPhone}</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${user.userState == 0}">
                                                            <span class="badge badge-default">可用</span>
                                                        </c:when>
                                                        <c:when test="${user.userState == 1}">
                                                            <span class="badge badge-danger">禁用</span>
                                                        </c:when>
                                                    </c:choose>
                                                </td>
                                                <td>${fn:substring(user.registerTime, 0, 10)}</td>
                                                <td>${fn:substring(user.loginTime, 0, 10)}</td>
                                                <td>
                                                    <button class="btn btn-xs btn-info"
                                                            onclick="resetPwd('${user.userId}', '${user.userEmail}')" data-toggle="modal"
                                                            data-target="#updateModal">重置密码
                                                    </button>
                                                    <button class="btn btn-xs btn-danger"
                                                            onclick="deleteUser(${user.userId})">删 除
                                                    </button>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改用户密码 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">修改用户密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>新密码</label>
                        <input type="text" required class="form-control input-square newPwd" placeholder="Password">
                        <small class="form-text text-muted">提示：最少6位<strong
                                class="text-warning">区分大小写</strong></small>
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="text" required class="form-control input-square checkPwd" placeholder="Password">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updatePwdBtn">更新密码</button>
            </div>
        </div>
    </div>
</div>
</body>

<%-- js --%>
<%@include file="../common/script.jsp" %>

<script>
    function resetPwd(id, email) {
        $("#updatePwdBtn").on("click", function () {
            var newPwd = $(".newPwd").val();
            var checkPwd = $(".checkPwd").val();
            if (newPwd != null && newPwd.length > 5) {
                if (checkPwd != null && checkPwd.length > 5) {
                    if (newPwd == checkPwd) {
                        $.ajax({
                            type: "POST",
                            url: "/manage/user/resetPwd",
                            data: {
                                userId: id,
                                userPassword: newPwd,
                                userEmail: email
                            },
                            dataType: "json",
                            success: function (data) {
                                if (data.status == 200) {
                                    alert(data.message);
                                }
                            },
                            error: function () {
                                alert("Ajax 请求错误");
                            }
                        });
                    } else {
                        alert("两次输入的密码不同");
                    }
                } else {
                    alert("确认密码不能为空，且最小为6位");
                }
            } else {
                alert("新密码不能为空，且最小为6位");
            }
        });
    }

    function deleteUser(id) {
        if (confirm("警告：将永久删除该数据")) {
            $.ajax({
                type: "GET",
                url: "/manage/user/delete/" + id,
                dataType: "json",
                success: function (data) {
                    if (data.status == 200) {
                        alert(data.message);
                        window.location.reload();
                    }
                },
                error: function () {
                    alert("Ajax 请求错误");
                }
            });
        }
    }
</script>
</html>